import { useEffect, useState } from "react";
import style from "./apply.module.scss";
import { Input, List } from "antd";
const { Search } = Input;
import { page } from "@/api/definition";
const data = [
  "Racing car sprays burning fuel into crowd.",
  "Japanese princess to wed commoner.",
  "Australian walks 100km after outback crash.",
  "Man charged over missing wedding girl.",
  "Los Angeles battles huge wildfires.",
];
const Apply = () => {
  const [dataSource, setDataSource] = useState([]);
  const [pageSize, setPageSize] = useState(15);
  const [pageNum, setPageNum] = useState(1);
  const [total, setTotal] = useState(0);
  const [name, setName] = useState("");

  useEffect(() => {
    getPage(pageNum, pageSize);
  }, []);
  const getPage = (pageNo, size) => {
    let pageInput = {
      pageNum: pageNo,
      pageSize: size,
      status: 1,
      name: name,
    };
    page(pageInput).then((res) => {
      setDataSource(res.data);
      setTotal(res.total);
    });
  };

  const onPageChange = (page, size) => {
    setPageNum(page);
    setPageSize(size);
    getPage(page, size);
  };

  const onSearch = () => {
    getPage(pageNum, pageSize);
  };

  return (
    <div className={style.apply}>
      <div className={style.top}>
        <span>发起申请</span>
        <Search
          placeholder="流程名称"
          allowClear
          onChange={(e) => {
            setName(e.target.value);
          }}
          onSearch={onSearch}
          size="middle"
          style={{ width: 200 }}
        />
      </div>
      <div className={style.content}>
        <div className={style.left}>
          <List
            size="large"
            header={<div>常用流程</div>}
            dataSource={data}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </div>
        <div className={style.right}>
          <List
            size="large"
            header={<div>全部流程</div>}
            dataSource={dataSource}
            pagination={{
              pageSizeOptions: ["20", "30", "50", "100"],
              total: total,
              onChange: (page, size) => {
                onPageChange(page, size);
              },
              position: "bottom",
            }}
            renderItem={(item) => (
              <List.Item>
                <a>{item.name}</a>
              </List.Item>
            )}
          />
        </div>
      </div>
    </div>
  );
};

export default Apply;
